<template>
  <div id="gourmet">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <h2>小小美食家</h2>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <span id="geng">
            <router-link to="/Person" class="all">查看全部 ></router-link>
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row class="top">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <router-link
                  tag="li"
                  :to="{ path: '/othercenter', query: { userId: userList[0].userId } }"
                >
                  <div class="gourmet-left">
                    <span class="userId">{{userList[0].userId}}</span>
                    <img :src="'/api/upload/' + userList[0].userImg" class="img_6" alt />
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <router-link
                  tag="li"
                  :to="{ path: '/othercenter', query: { userId: userList[0].userId } }"
                >
                  <div class="gourmet-left">
                    <div class="info">
                      <p>{{userList[0].userName}}</p>
                      <p>
                        <span>{{userList[0].fansNum}}</span>粉丝
                      </p>
                    </div>
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <input type="button" value="+关注" ref="add" class="zhu" @click="guzhu" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <router-link
                  tag="li"
                  :to="{ path: '/othercenter', query: { userId: userList[1].userId } }"
                >
                  <div class="gourmet-left">
                    <span class="userId">{{userList[1].userId}}</span>
                    <img :src="'/api/upload/' + userList[1].userImg" class="img_6" alt />
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <router-link
                  tag="li"
                  :to="{ path: '/othercenter', query: { userId: userList[1].userId } }"
                >
                  <div class="gourmet-left">
                    <div class="info">
                      <p>{{userList[1].userName}}</p>
                      <p>
                        <span>{{userList[1].fansNum}}</span>粉丝
                      </p>
                    </div>
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <input type="button" value="+关注" ref="add1" class="zhu" @click="guzhu1" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <router-link
                    tag="li"
                    :to="{ path: '/othercenter', query: { userId: userList[2].userId } }"
                  >
                    <div class="gourmet-left">
                      <span class="userId">{{userList[2].userId}}</span>
                      <img :src="'/api/upload/' + userList[2].userImg" class="img_6" alt />
                    </div>
                  </router-link>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <router-link
                    tag="li"
                    :to="{ path: '/othercenter', query: { userId: userList[2].userId } }"
                  >
                    <div class="gourmet-left">
                      <div class="info">
                        <p>{{userList[2].userName}}</p>
                        <p>
                          <span>{{userList[2].fansNum}}</span>粉丝
                        </p>
                      </div>
                    </div>
                  </router-link>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <input type="button" value="+关注" ref="add2" class="zhu" @click="guzhu2" />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <router-link
                  tag="li"
                  :to="{ path: '/othercenter', query: { userId: userList[3].userId } }"
                >
                  <div class="gourmet-left">
                    <span class="userId">{{userList[3].userId}}</span>
                    <img :src="'/api/upload/' + userList[3].userImg" class="img_6" alt />
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <router-link
                  tag="li"
                  :to="{ path: '/othercenter', query: { userId: userList[3].userId } }"
                >
                  <div class="gourmet-left">
                    <div class="info">
                      <p>{{userList[3].userName}}</p>
                      <p>
                        <span>{{userList[3].fansNum}}</span>粉丝
                      </p>
                    </div>
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <input type="button" value="+关注" ref="add3" class="zhu" @click="guzhu3" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <router-link
                  tag="li"
                  :to="{ path: '/othercenter', query: { userId: userList[4].userId } }"
                >
                  <div class="gourmet-left">
                    <span class="userId">{{userList[4].userId}}</span>
                    <img :src="'/api/upload/' + userList[4].userImg" class="img_6" alt />
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <router-link
                  tag="li"
                  :to="{ path: '/othercenter', query: { userId: userList[4].userId } }"
                >
                  <div class="gourmet-left">
                    <div class="info">
                      <p>{{userList[4].userName}}</p>
                      <p>
                        <span>{{userList[4].fansNum}}</span>粉丝
                      </p>
                    </div>
                  </div>
                </router-link>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <input type="button" value="+关注" ref="add4" class="zhu" @click="guzhu4" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <router-link
                    tag="li"
                    :to="{ path: '/othercenter', query: { userId: userList[5].userId } }"
                  >
                    <div class="gourmet-left">
                      <span class="userId">{{userList[5].userId}}</span>
                      <img :src="'/api/upload/' + userList[5].userImg" class="img_6" alt />
                    </div>
                  </router-link>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <router-link
                    tag="li"
                    :to="{ path: '/othercenter', query: { userId: userList[5].userId } }"
                  >
                    <div class="gourmet-left">
                      <div class="info">
                        <p>{{userList[5].userName}}</p>
                        <p>
                          <span>{{userList[5].fansNum}}</span>粉丝
                        </p>
                      </div>
                    </div>
                  </router-link>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <input type="button" value="+关注" ref="add5" class="zhu" @click="guzhu5" />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="css" scoped>
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
h2 {
  font-size: 20px;
  color: #e6a23c;
  font-weight: 700;
  line-height: 48px;
  margin-left: 15px;
}
.top {
  margin-top: 20px;
}
#gourmet li {
  /* width: 33%; */
  margin-bottom: 50px;
}
#gourmet .img_6 {
  /* float: left; */
  width: 60%;
  height: 73px;
  margin-top: 5px;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 13px;
}
.info {
  margin-left: -20px;
}
.info p {
  margin-top: 20px;
  line-height: 10px;
  font-size: 16px;
}
.info span {
  font-size: 15px;
  color: #ccc;
}
.zhu {
  float: right;
  width: 70%;
  height: 40px;
  border: 1px solid black;
  border-radius: 10px;
  margin-top: 18px;
  font-size: 14px;
  text-align: center;
  background-color: white;
  margin-right: 40px;
}
.all {
  text-decoration: none;
  color: black;
  font-size: 18px;
  line-height: 48px;
  float: right;
}
.all:hover {
  color: #e6a23c;
}
</style>
<script>
export default {
  data() {
    return {
      userList: [],
      getUserInfo: [],
      indexFocusBtn: [],
      getindexfocus: []
    };
  },
  //钩子函数
  created() {
    //获取所有用户详情信息
    this.$axios
      .get("/api/createNote/getUser")
      .then(res => {
        this.userList = res.data.data;
        //获取用户信息
        this.$axios
          .get("/api/users/getUserInfo")
          .then(res => {
            this.getUserInfo = res.data.data;
            console.log("getUserInfo", this.getUserInfo);
            //获取首页关注按钮状态
            this.$axios
              .get("/api/createNote/indexFocusBtn", {
                params: {
                  userId: this.userList[0].userId,
                  selfId: this.getUserInfo[0].userId
                }
              })
              .then(res => {
                console.log("indexFocusBtn:", res.data.data);
                this.indexFocusBtn = res.data.data;
                if (this.indexFocusBtn.length != 0) {
                  this.$refs.add.value = "取消关注";
                  this.$refs.add.style.backgroundColor = "#e6a23c";
                  this.$refs.add.style.border = "1px solid #e6a23c";
                  this.$refs.add.style.color = "#fff";
                } else {
                  this.$refs.add.value = "+关注";
                  this.$refs.add.style.backgroundColor = "#fff";
                  this.$refs.add.style.border = "1px solid #000";
                  this.$refs.add.style.color = "#000";
                }
              })
              .catch(err => {
                console.log("err:", err);
              });
            //获取首页关注按钮状态
            this.$axios
              .get("/api/createNote/indexFocusBtn", {
                params: {
                  userId: this.userList[1].userId,
                  selfId: this.getUserInfo[0].userId
                }
              })
              .then(res => {
                console.log("indexFocusBtn1:", res.data.data);
                this.indexFocusBtn1 = res.data.data;
                if (this.indexFocusBtn1.length != 0) {
                  this.$refs.add1.value = "取消关注";
                  this.$refs.add1.style.backgroundColor = "#e6a23c";
                  this.$refs.add1.style.border = "1px solid #e6a23c";
                  this.$refs.add1.style.color = "#fff";
                } else {
                  this.$refs.add1.value = "+关注";
                  this.$refs.add1.style.backgroundColor = "#fff";
                  this.$refs.add1.style.border = "1px solid #000";
                  this.$refs.add1.style.color = "#000";
                }
              })
              .catch(err => {
                console.log("err:", err);
              });
            //获取首页关注按钮状态
            this.$axios
              .get("/api/createNote/indexFocusBtn", {
                params: {
                  userId: this.userList[2].userId,
                  selfId: this.getUserInfo[0].userId
                }
              })
              .then(res => {
                console.log("indexFocusBtn2:", res.data.data);
                this.indexFocusBtn2 = res.data.data;
                if (this.indexFocusBtn2.length != 0) {
                  this.$refs.add2.value = "取消关注";
                  this.$refs.add2.style.backgroundColor = "#e6a23c";
                  this.$refs.add2.style.border = "1px solid #e6a23c";
                  this.$refs.add2.style.color = "#fff";
                } else {
                  this.$refs.add2.value = "+关注";
                  this.$refs.add2.style.backgroundColor = "#fff";
                  this.$refs.add2.style.border = "1px solid #000";
                  this.$refs.add2.style.color = "#000";
                }
              })
              .catch(err => {
                console.log("err:", err);
              });
            //获取首页关注按钮状态
            this.$axios
              .get("/api/createNote/indexFocusBtn", {
                params: {
                  userId: this.userList[3].userId,
                  selfId: this.getUserInfo[0].userId
                }
              })
              .then(res => {
                console.log("indexFocusBtn3:", res.data.data);
                this.indexFocusBtn3 = res.data.data;
                if (this.indexFocusBtn3.length != 0) {
                  this.$refs.add3.value = "取消关注";
                  this.$refs.add3.style.backgroundColor = "#e6a23c";
                  this.$refs.add3.style.border = "1px solid #e6a23c";
                  this.$refs.add3.style.color = "#fff";
                } else {
                  this.$refs.add3.value = "+关注";
                  this.$refs.add3.style.backgroundColor = "#fff";
                  this.$refs.add3.style.border = "1px solid #000";
                  this.$refs.add3.style.color = "#000";
                }
              })
              .catch(err => {
                console.log("err:", err);
              });
            //获取首页关注按钮状态
            this.$axios
              .get("/api/createNote/indexFocusBtn", {
                params: {
                  userId: this.userList[4].userId,
                  selfId: this.getUserInfo[0].userId
                }
              })
              .then(res => {
                console.log("indexFocusBtn4:", res.data.data);
                this.indexFocusBtn4 = res.data.data;
                if (this.indexFocusBtn4.length != 0) {
                  this.$refs.add4.value = "取消关注";
                  this.$refs.add4.style.backgroundColor = "#e6a23c";
                  this.$refs.add4.style.border = "1px solid #e6a23c";
                  this.$refs.add4.style.color = "#fff";
                } else {
                  this.$refs.add4.value = "+关注";
                  this.$refs.add4.style.backgroundColor = "#fff";
                  this.$refs.add4.style.border = "1px solid #000";
                  this.$refs.add4.style.color = "#000";
                }
              })
              .catch(err => {
                console.log("err:", err);
              });
            //获取首页关注按钮状态
            this.$axios
              .get("/api/createNote/indexFocusBtn", {
                params: {
                  userId: this.userList[5].userId,
                  selfId: this.getUserInfo[0].userId
                }
              })
              .then(res => {
                console.log("indexFocusBtn5:", res.data.data);
                this.indexFocusBtn5 = res.data.data;
                if (this.indexFocusBtn5.length != 0) {
                  this.$refs.add5.value = "取消关注";
                  this.$refs.add5.style.backgroundColor = "#e6a23c";
                  this.$refs.add5.style.border = "1px solid #e6a23c";
                  this.$refs.add5.style.color = "#fff";
                } else {
                  this.$refs.add5.value = "+关注";
                  this.$refs.add5.style.backgroundColor = "#fff";
                  this.$refs.add5.style.border = "1px solid #000";
                  this.$refs.add5.style.color = "#000";
                }
              })
              .catch(err => {
                console.log("err:", err);
              });
          })
          .catch(err => {
            console.log("err:", err);
          });
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  methods: {
    guzhu() {
      if (this.$refs.add.value == "+关注") {
        this.$refs.add.style.backgroundColor = "#e6a23c";
        this.$refs.add.style.border = "1px solid #e6a23c";
        this.$refs.add.style.color = "#fff";
        this.$refs.add.value = "取消关注";
        //添加关注表数据
        this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.userList[0].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus = res.data.data;
            // console.log("getnotefocus:", res.data.data);
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.add.value == "取消关注") {
        this.$refs.add.style.backgroundColor = "#fff";
        this.$refs.add.style.border = "1px solid #000";
        this.$refs.add.style.color = "#000";
        this.$refs.add.value = "+关注";
        //删除关注表数据
        this.$axios
          .get("/api/users/delfocus", {
            params: {
              userId: this.userList[0].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus = res.data.data;
            // console.log("getnotefocus:", res.data.data);
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    },
    guzhu1() {
      if (this.$refs.add1.value == "+关注") {
        this.$refs.add1.style.backgroundColor = "#e6a23c";
        this.$refs.add1.style.border = "1px solid #e6a23c";
        this.$refs.add1.style.color = "#fff";
        this.$refs.add1.value = "取消关注";
        //添加关注表数据
        this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.userList[1].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus1 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.add1.value == "取消关注") {
        this.$refs.add1.style.backgroundColor = "#fff";
        this.$refs.add1.style.border = "1px solid #000";
        this.$refs.add1.style.color = "#000";
        this.$refs.add1.value = "+关注";
        //删除关注表数据
        this.$axios
          .get("/api/users/delfocus", {
            params: {
              userId: this.userList[1].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus1 = res.data.data;
            // console.log("getnotefocus:", res.data.data);
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    },
    guzhu2() {
      if (this.$refs.add2.value == "+关注") {
        this.$refs.add2.style.backgroundColor = "#e6a23c";
        this.$refs.add2.style.border = "1px solid #e6a23c";
        this.$refs.add2.style.color = "#fff";
        this.$refs.add2.value = "取消关注";
        //添加关注表数据
        this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.userList[2].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus2 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.add2.value == "取消关注") {
        this.$refs.add2.style.backgroundColor = "#fff";
        this.$refs.add2.style.border = "1px solid #000";
        this.$refs.add2.style.color = "#000";
        this.$refs.add2.value = "+关注";
        //删除关注表数据
        this.$axios
          .get("/api/users/delfocus", {
            params: {
              userId: this.userList[2].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus2 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    },
    guzhu3() {
      if (this.$refs.add3.value == "+关注") {
        this.$refs.add3.style.backgroundColor = "#e6a23c";
        this.$refs.add3.style.border = "1px solid #e6a23c";
        this.$refs.add3.style.color = "#fff";
        this.$refs.add3.value = "取消关注";
        //添加关注表数据
        this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.userList[3].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus3 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.add3.value == "取消关注") {
        this.$refs.add3.style.backgroundColor = "#fff";
        this.$refs.add3.style.border = "1px solid #000";
        this.$refs.add3.style.color = "#000";
        this.$refs.add3.value = "+关注";
        //删除关注表数据
        this.$axios
          .get("/api/users/delfocus", {
            params: {
              userId: this.userList[3].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus3 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    },
    guzhu4() {
      if (this.$refs.add4.value == "+关注") {
        this.$refs.add4.style.backgroundColor = "#e6a23c";
        this.$refs.add4.style.border = "1px solid #e6a23c";
        this.$refs.add4.style.color = "#fff";
        this.$refs.add4.value = "取消关注";
        //添加关注表数据
        this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.userList[4].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus4 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.add4.value == "取消关注") {
        this.$refs.add4.style.backgroundColor = "#fff";
        this.$refs.add4.style.border = "1px solid #000";
        this.$refs.add4.style.color = "#000";
        this.$refs.add4.value = "+关注";
        //删除关注表数据
        this.$axios
          .get("/api/users/delfocus", {
            params: {
              userId: this.userList[4].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus4 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    },
    guzhu5() {
      if (this.$refs.add5.value == "+关注") {
        this.$refs.add5.style.backgroundColor = "#e6a23c";
        this.$refs.add5.style.border = "1px solid #e6a23c";
        this.$refs.add5.style.color = "#fff";
        this.$refs.add5.value = "取消关注";
        //添加关注表数据
        this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.userList[5].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus5 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.add5.value == "取消关注") {
        this.$refs.add5.style.backgroundColor = "#fff";
        this.$refs.add5.style.border = "1px solid #000";
        this.$refs.add5.style.color = "#000";
        this.$refs.add5.value = "+关注";
        //删除关注表数据
        this.$axios
          .get("/api/users/delfocus", {
            params: {
              userId: this.userList[5].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getindexfocus5 = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    }
  }
};
</script>